import React, { Component } from 'react';
import { Table, Tabs, Input, Button, Form } from 'antd';
import { apiServiceProviderPage } from '@/request/serverAuth'
const { TabPane } = Tabs;
const { Search } = Input;
export default class ServerAuth extends Component {
    constructor() {
        super()
        this.refForm = React.createRef()
        this.state = {
            approvalStatus: 1,//0待审核  1已审核
            tabs: [
                {
                    key: '1',
                    label: '已审核',
                    children: '[]'

                },
                {
                    key: '0',
                    label: '待审核',
                    children: '123'
                }
            ],
            columns: [
                {
                    title: '',
                    dataIndex: 'index',
                    key: 'index',
                    width: 50

                },
                {
                    title: '姓名',
                    dataIndex: 'name',
                    width: 180,
                    key: 'name',
                    render: (text, content) => <div style={{ width: '150px', wordBreak: 'break-all', whiteSpace: 'break-spaces' }}>{text}</div>

                },
                {
                    title: '职业类型',
                    dataIndex: 'occupationClass',
                    key: 'occupationClass',
                    width: 300,

                    render: (text, content) => <div style={{ width: '250px', wordBreak: 'break-all', whiteSpace: 'break-spaces' }}>{text}</div>

                },
                {
                    title: '手机号',
                    dataIndex: 'mobile',
                    key: 'mobile',
                    width: 150
                },
                {
                    title: '微信号',
                    dataIndex: 'wxNumber',
                    key: 'wxNumber',
                    width: 150,
                    render: (text, content) => <div style={{ width: '120px', wordBreak: 'break-all', whiteSpace: 'break-spaces' }}>{text}</div>

                },
                {
                    title: '家庭现住址',
                    dataIndex: 'address',
                    key: 'address',
                    width: 300,
                    render: (text, content) => <div style={{ width: '250px', wordBreak: 'break-all', whiteSpace: 'break-spaces' }}>{text}</div>
                },
                {
                    title: '操作',
                    dataIndex: 'operate',
                    key: 'operate',
                    width: 100,
                    render: (text, content) => <Button type='link' onClick={() => this.handleLook(content)}>查看</Button>,
                },
            ],
            dataSource: [],
            pageNo: 1,
            pageSize: 10,
            totalCount: 0,
            searchParams: {
                name: '',
                mobile: ''
            },
            name: '11111'

        }
    }
    componentDidMount() {
        this.getData()
    }
    getData = () => {
        const { pageNo, pageSize, approvalStatus } = this.state
        apiServiceProviderPage({
            pageNo: pageNo,
            pageSize: pageSize,
            approvalStatus: approvalStatus,
            ...this.state.searchParams
        }).then(res => {
            if (res.code == 0) {
                this.setState({
                    dataSource: res.data.map((item, index) => {
                        return {
                            ...item,
                            index: index + 1
                        }
                    }),
                    totalCount: res.totalCount
                })
            }
        })
    }
    handleLook = (row) => {
        this.props.history.push(`/serverAuth/detail/${row.serviceProviderId}/${this.state.approvalStatus}`)
    }
    tabChange = (e) => {
        this.refForm.current.resetFields()
        this.setState({
            approvalStatus: e,
            pageNo: 1,
            searchParams: {
                name: '',
                mobile: ''
            },
            name: ''
        }, () => {
            this.getData()
        })
    }
    onChange = (e) => {
        console.log(e, 'onChange');
        this.setState({
            pageNo: e.current,

        }, () => {
            this.getData()
        })
    }
    onSearch = (e, key) => {
        this.setState({
            searchParams: {
                ...this.state.searchParams,
                [key]: e
            },
            pageNo: 1
        }, () => {
            this.getData()
        })
    }
    render() {
        const { columns, dataSource, tabs, totalCount, pageNo, pageSize, searchParams, name } = this.state
        const operations = <Form
            style={{ width: 500, }}
            ref={this.refForm}
            layout='inline'
        >
            <Form.Item
                label=""
                name="name"
            >
                <Search onSearch={(e) => this.onSearch(e, 'name')} placeholder='姓名' />
            </Form.Item>
            <Form.Item
                label=""
                name="mobile"
            >
                <Search onSearch={(e) => this.onSearch(e, 'mobile')} placeholder='手机号' />
            </Form.Item>
        </Form>;
        return (
            <div className='p-layout-box'>
                <Tabs defaultActiveKey="ysh" onChange={this.tabChange} tabBarExtraContent={operations}>
                    {
                        tabs && tabs.map(item => {
                            return (
                                <TabPane tab={item.label} key={item.key} >
                                    <Table columns={columns} dataSource={dataSource} pagination={{
                                        total: totalCount,
                                        pageSize,
                                        pageNo,
                                        showQuickJumper: true
                                    }}
                                        scroll={{
                                            y: '60vh',
                                        }}
                                        bordered
                                        onChange={this.onChange} />
                                </TabPane>
                            )
                        })
                    }
                </Tabs>
            </div>
        );
    }
}
